<template>
  <div class="bottomMenuRightComponent" v-if="control">
    <collapseComponent
      title="组件样式"
      :open="true"
      :rightIndex="0"
      direction="column"
      @switchCollapse="switchCollapse"
    >
      <radioGroupComponent
        v-if="control.right[0].catalog[0].display === 'block'"
        :item="control.right[0].catalog[0]"
        :id="control.id"
        :rightIndex="0"
        :catalogIndex="0"
        :cls="'bottomMenuIconStyle'"
        @updateParent="updateParent"
        data-title="图标样式"
      ></radioGroupComponent>
      <div style="height: 10px"></div>
      <radioComponent
        v-if="
          control.right[0].catalog[1].display === 'block' &&
          control.main.iconStyle === 0
        "
        :item="control.right[0].catalog[1]"
        :id="control.id"
        :rightIndex="0"
        :catalogIndex="1"
        @updateParent="updateParent"
        data-title="图标位置"
      ></radioComponent>
    </collapseComponent>

    <collapseComponent
      title="菜单内容"
      :open="true"
      :rightIndex="1"
      direction="column"
      @switchCollapse="switchCollapse"
    >
      <inputComponent
        v-if="control.right[1].catalog[0].display === 'block'"
        :item="control.right[1].catalog[0]"
        :id="control.id"
        :rightIndex="1"
        :catalogIndex="0"
        @updateParent="updateParent"
        data-title="菜单名称"
      ></inputComponent>
      <div style="height: 20px" v-if="control.right[1].catalog[1].display === 'block'"></div>

      <radioComponent
        v-if="control.right[1].catalog[1].display === 'block'"
        :item="control.right[1].catalog[1]"
        :id="control.id"
        :rightIndex="1"
        :catalogIndex="1"
        @updateParent="updateParent"
        data-title="显示标记"
      ></radioComponent>
      <div style="height: 20px" v-if="control.right[1].catalog[1].display === 'block'&&control.right[1].catalog[1].value"></div>
      <div class="badgeWrapper" v-if="control.right[1].catalog[1].display === 'block'&&control.right[1].catalog[1].value">
        <div class="left"></div>
        <div class="right">
          <div
            class="bgColor"
            style="
              background-color: #f4f6f8;
              padding: 15px 0px;
              width: calc(100% - 100px);
              margin-left: 100px;
            "
          >
            <colorComponent
              v-if="control.right[1].catalog[2].display === 'block'"
              :item="control.right[1].catalog[2]"
              :id="control.id"
              :rightIndex="1"
              :catalogIndex="2"
              @updateParent="updateParent"
              data-title="标记背景颜色"
            ></colorComponent>
          </div>
        </div>
      </div>
    </collapseComponent>

    <collapseComponent
      title="图标内容"
      :open="true"
      :rightIndex="2"
      direction="column"
      @switchCollapse="switchCollapse"
    >
      <div class="iconWrapper" v-if="control.main.iconStyle === 0">
        <draggable
          class="iconDraggableWrapper"
          v-model="control.right[2].catalog[0].list"
          handle=".iconElIconRank"
          v-bind="iconDraggableOptions"
          @end="iconDraggableChanged"
          v-if="control.right[2].catalog[0].list.length > 0"
        >
          <transition-group tag="div" class="list">
            <div
              class="item iconDraggableItem"
              v-for="(iconItem, iconIndex) in control.right[2].catalog[0].list"
              :key="iconItem.id"
            >
              <div class="itemL">
                <i class="el-icon-rank iconElIconRank"></i>
              </div>
              <div class="itemR">
                <div class="row">
                  <div class="left">图标：</div>
                  <div class="right">
                    <div class="buttonWrapper">
                      <div
                        class="uploadBtn"
                        v-if="!iconItem.icon"
                        @click="openChooseIcon(iconIndex)"
                      >
                        <i class="el-icon-plus"></i>
                      </div>
                      <i
                        v-if="iconItem.icon"
                        :class="iconItem.icon"
                        style="
                          width: 100%;
                          display: flex;
                          justify-content: center;
                        "
                      ></i>

                      <span
                        v-if="iconItem.icon"
                        class="repaceImg"
                        @click="updateChooseIcon(iconIndex)"
                        >替换</span
                      >

                      <span
                        v-if="iconItem.icon"
                        class="el-icon-error delImg"
                        @click="delIcon(iconIndex)"
                      ></span>
                    </div>
                   
                    <div
                      v-if="control.right[1].catalog[1].value&&iconItem.badge!==undefined"
                      style="
                        margin-left: 50px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <el-checkbox
                        v-model="iconItem.badge"
                        @change="setBadge(2, 0, iconIndex)"
                        >标记</el-checkbox
                      >
                    </div>
                    <div
                      style="
                        margin-left: 50px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <el-checkbox
                        v-model="iconItem.active"
                        @change="setSelected(2, 0, iconIndex)"
                        >默认选中</el-checkbox
                      >
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="left">按钮文字：</div>
                  <div class="right">
                    <el-input
                      v-model="iconItem.name"
                      show-word-limit
                      maxlength="5"
                      clearable
                      @input="textInputChange(2, 0, iconIndex)"
                    ></el-input>
                  </div>
                </div>
                <div class="row">
                  <div class="left">点击链接：</div>
                  <div class="right">
                    <div class="chooseUrl">
                      <div class="urlBox">
                        <div
                          class="haveUrl"
                          v-if="iconItem.linkName || iconItem.linkUrl"
                        >
                          <el-button plain disabled class="haveUrlBtn">
                            <i class="el-icon-paperclip"></i>
                            <span>{{
                              iconItem.linkName || iconItem.linkUrl || ""
                            }}</span>
                          </el-button>
                          <el-button
                            type="text"
                            class="updateHref"
                            @click="rightUpdateLinkForIcon(iconIndex)"
                            >修改</el-button
                          >
                        </div>
                        <div class="noUrl" v-else>
                          <el-button
                            plain
                            class="noUrlBtn"
                            @click="rightChooseLinkForIcon(iconIndex)"
                          >
                            <i class="el-icon-paperclip"></i>
                            选择链接
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <span
                class="el-icon-error delImageSwiperItem"
                v-if="control.right[2].catalog[0].list.length > 2"
                @click="delIconWrapperItem(iconItem.id)"
              ></span>
            </div>
          </transition-group>
        </draggable>

        <el-button
          style="width: 100%"
          @click="addIconMenuItem"
          v-if="control.right[2].catalog[0].list.length < 5"
          >+添加菜单 {{ control.right[2].catalog[0].list.length }}/5</el-button
        >
      </div>

      <div class="imgWrapper" v-if="control.main.iconStyle === 1">
        <draggable
          class="imgDraggableWrapper"
          v-model="control.right[2].catalog[1].list"
          handle=".imgElIconRank"
          v-bind="imgDraggableOptions"
          @end="imgDraggableChanged"
          v-if="control.right[2].catalog[1].list.length > 0"
        >
          <transition-group tag="div" class="list">
            <div
              class="item imgDraggableItem"
              v-for="(imgItem, imgIndex) in control.right[2].catalog[1].list"
              :key="imgItem.id"
            >
              <div class="itemL">
                <i class="el-icon-rank imgElIconRank"></i>
              </div>
              <div class="itemR">
                <div class="row">
                  <div class="left">按钮图片：</div>
                  <div class="right">
                    <div class="normal">
                      <div class="box">
                        <div class="buttonWrapper">
                          <div
                            class="uploadBtn"
                            v-if="!imgItem.img"
                            @click="openChooseImgForMenuImg(imgIndex)"
                          >
                            <i class="el-icon-plus"></i>
                          </div>
                          <img v-if="imgItem.img" :src="imgItem.img" alt />
                          <span
                            v-if="imgItem.img"
                            class="repaceImg"
                            @click="updateChooseImgForMenuImg(imgIndex)"
                            >替换</span
                          >
                          <span
                            v-if="imgItem.img"
                            class="el-icon-error delImg"
                            @click="delImgForMenuImg(imgIndex)"
                          ></span>
                        </div>
                      </div>
                      <span>未选中</span>
                    </div>
                    <div class="active">
                      <div class="box">
                        <div class="buttonWrapper">
                          <div
                            class="uploadBtn"
                            v-if="!imgItem.activeImg"
                            @click="openChooseImgForMenuActive(imgIndex)"
                          >
                            <i class="el-icon-plus"></i>
                          </div>
                          <img
                            v-if="imgItem.activeImg"
                            :src="imgItem.activeImg"
                            alt
                          />

                          <span
                            v-if="imgItem.activeImg"
                            class="repaceImg"
                            @click="updateChooseImgForMenuActive(imgIndex)"
                            >替换</span
                          >

                          <span
                            v-if="imgItem.activeImg"
                            class="el-icon-error delImg"
                            @click="delImgForMenuActive(imgIndex)"
                          ></span>
                        </div>
                      </div>
                      <span>选中</span>
                    </div>

                    <div
                      v-if="imgItem.badge!==undefined && control.right[1].catalog[1].value"
                      style="
                        margin-left: 30px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <el-checkbox
                        v-model="imgItem.badge"
                        @change="setBadge(2, 1, imgIndex)"
                        >标记</el-checkbox
                      >
                    </div>
                    <div
                      style="
                        margin-left: 30px;
                        height: 40px;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <el-checkbox
                        v-model="imgItem.active"
                        @change="setSelected(2, 1, imgIndex)"
                        >默认选中</el-checkbox
                      >
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="left">点击链接：</div>
                  <div class="right">
                    <div class="chooseUrl">
                      <div class="urlBox">
                        <div
                          class="haveUrl"
                          v-if="imgItem.linkName || imgItem.linkUrl"
                        >
                          <el-button plain disabled class="haveUrlBtn">
                            <i class="el-icon-paperclip"></i>
                            <span>{{
                              imgItem.linkName || imgItem.linkUrl || ""
                            }}</span>
                          </el-button>
                          <el-button
                            type="text"
                            class="updateHref"
                            @click="rightUpdateLinkForImg(imgIndex)"
                            >修改</el-button
                          >
                        </div>
                        <div class="noUrl" v-else>
                          <el-button
                            plain
                            class="noUrlBtn"
                            @click="rightChooseLinkForImg(imgIndex)"
                          >
                            <i class="el-icon-paperclip"></i>
                            选择链接
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <span
                class="el-icon-error delImageSwiperItem"
                v-if="control.right[2].catalog[1].list.length > 2"
                @click="delImgWrapperItem(imgItem.id)"
              ></span>
            </div>
          </transition-group>
        </draggable>

        <el-button
          style="width: 100%"
          @click="addImgMenuItem"
          v-if="control.right[2].catalog[1].list.length < 5"
          >+添加菜单 {{ control.right[2].catalog[1].list.length }}/5</el-button
        >
      </div>
    </collapseComponent>

    <collapseComponent
      title="内容样式"
      :open="true"
      :rightIndex="3"
      direction="column"
      @switchCollapse="switchCollapse"
    >
      <colorComponent
        v-if="control.right[3].catalog[0].display === 'block'"
        :item="control.right[3].catalog[0]"
        :id="control.id"
        :rightIndex="3"
        :catalogIndex="0"
        @updateParent="updateParent"
        data-title="分割线颜色"
      ></colorComponent>
      <div style="height: 30px"></div>
      <colorComponent
        v-if="
          control.right[3].catalog[1].display === 'block' &&
          control.main.iconStyle === 0
        "
        :item="control.right[3].catalog[1]"
        :id="control.id"
        :rightIndex="3"
        :catalogIndex="1"
        @updateParent="updateParent"
        data-title="文字默认颜色"
      ></colorComponent>
      <div style="height: 30px" v-if="control.main.iconStyle === 0"></div>
      <colorComponent
        v-if="
          control.right[3].catalog[2].display === 'block' &&
          control.main.iconStyle === 0
        "
        :item="control.right[3].catalog[2]"
        :id="control.id"
        :rightIndex="3"
        :catalogIndex="2"
        @updateParent="updateParent"
        data-title="文字选中颜色"
      ></colorComponent>
      <div style="height: 30px" v-if="control.main.iconStyle === 0"></div>
      <colorComponent
        v-if="
          control.right[3].catalog[3].display === 'block' &&
          control.main.iconStyle === 0
        "
        :item="control.right[3].catalog[3]"
        :id="control.id"
        :rightIndex="3"
        :catalogIndex="3"
        @updateParent="updateParent"
        data-title="图标默认颜色"
      ></colorComponent>
      <div style="height: 30px" v-if="control.main.iconStyle === 0"></div>
      <colorComponent
        v-if="
          control.right[3].catalog[4].display === 'block' &&
          control.main.iconStyle === 0
        "
        :item="control.right[3].catalog[4]"
        :id="control.id"
        :rightIndex="3"
        :catalogIndex="4"
        @updateParent="updateParent"
        data-title="图标选中颜色"
      ></colorComponent>
      <div style="height: 30px" v-if="control.main.iconStyle === 0"></div>
      <colorComponent
        v-if="
          control.right[3].catalog[5].display === 'block' &&
          control.main.iconStyle === 0
        "
        :item="control.right[3].catalog[5]"
        :id="control.id"
        :rightIndex="3"
        :catalogIndex="5"
        @updateParent="updateParent"
        data-title="菜单默认颜色"
      ></colorComponent>
      <div style="height: 30px" v-if="control.main.iconStyle === 0"></div>
      <colorComponent
        v-if="
          control.right[3].catalog[6].display === 'block' &&
          control.main.iconStyle === 0
        "
        :item="control.right[3].catalog[6]"
        :id="control.id"
        :rightIndex="3"
        :catalogIndex="6"
        @updateParent="updateParent"
        data-title="菜单选中颜色"
      ></colorComponent>
      <colorComponent
        v-if="
          control.right[3].catalog[7].display === 'block' &&
          control.main.iconStyle == 1
        "
        :item="control.right[3].catalog[7]"
        :id="control.id"
        :rightIndex="3"
        :catalogIndex="7"
        @updateParent="updateParent"
        ref="bgColor"
        data-title="菜单控件条背景颜色"
      ></colorComponent>
    </collapseComponent>
    <div style="height: 50px"></div>
    <ChooseLinkComponent></ChooseLinkComponent>
    <ChooseImageComponent></ChooseImageComponent>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import draggable from "vuedraggable";
import ChooseLinkComponent from "../../components/vlonChooseLink/Index.vue";
import ChooseImageComponent from "../../components/vlonChooseImage/Index.vue";
export default {
  name: "bottomMenuRightComponent",
  data() {
    return {
      control: null,
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
      iconDraggableOptions: {
        group: { name: "layout", pull: false, put: false },
        draggable: ".iconDraggableItem",
        forceFallback: true,
        sort: true,
        animation: 300,
      },
      imgDraggableOptions: {
        group: { name: "layout", pull: false, put: false },
        draggable: ".imgDraggableItem",
        forceFallback: true,
        sort: true,
        animation: 300,
      },
      //选择图标/图片/链接时，记录下当前的索引号，便于选择完成后回写到对应对象上
      currentChooseIndex: 0,
    };
  },
  created() {},
  props: ["controlData"],
  components: {
    draggable,
    ChooseLinkComponent,
    ChooseImageComponent,
    collapseComponent: () => import("../../components/collapseComponent"),
    radioGroupComponent: () => import("../right/components/lone/radioGroupComponent"),
    colorComponent: () => import("../right/components/lone/colorComponent"),
    inputComponent: () => import("../right/components/lone/inputComponent"),
    radioComponent: () => import("../right/components/lone/radioComponent"),
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      Bus.$off(`bottomMenuIconAfter${this.controlData.id}`);
      Bus.$on(`bottomMenuIconAfter${this.controlData.id}`, (params) => {
        this.control.right.forEach(item => {
          if(item.catalog && item.catalog.length>0) {
            item.catalog.forEach(row => {
              if(row.ename == "iconContent") {
                row.list[this.currentChooseIndex].icon = params.url;
              }
            })
          }
        })

        this.control.main.iconContent[this.currentChooseIndex].icon = params.url;

        let list = [];
        this.control.right.forEach(item => {
          if(item.catalog && item.catalog.length>0) {
            item.catalog.forEach(row => {
              if(row.ename == "iconContent") {
                list = JSON.parse(JSON.stringify(row.list))
              }
            })
          }
        })
        this.updateParent(
          JSON.stringify({
            rightIndex: 2,
            catalogIndex: 0,
            ename: "iconContent",
            value: JSON.stringify(list),
            needUpdateMainChild: true,
          })
        );
      });
      Bus.$off(`bottomMenuImageAfter${this.controlData.id}`);
      Bus.$on(`bottomMenuImageAfter${this.controlData.id}`, (params) => {
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "imgContent") {
                  row.list[this.currentChooseIndex].img = params.url;
                }
              })
            }
          })

          this.control.main.imgContent[this.currentChooseIndex].img = params.url;

          let list = [];
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "imgContent") {
                  list = JSON.parse(JSON.stringify(row.list))
                }
              })
            }
          })
        this.updateParent(
          JSON.stringify({
            rightIndex: 2,
            catalogIndex: 1,
            ename: "imgContent",
            value: JSON.stringify(list),
            needUpdateMainChild: true,
          })
        );
      });
      Bus.$off(`bottomMenuImageActiveAfter${this.controlData.id}`);
      Bus.$on(`bottomMenuImageActiveAfter${this.controlData.id}`, (params) => {

        this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "imgContent") {
                  row.list[this.currentChooseIndex].activeImg = params.url;
                }
              })
            }
          })

          this.control.main.imgContent[this.currentChooseIndex].activeImg = params.url;

          let list = [];
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "imgContent") {
                  list = JSON.parse(JSON.stringify(row.list))
                }
              })
            }
          })

    
        this.updateParent(
          JSON.stringify({
            rightIndex: 2,
            catalogIndex: 1,
            ename: "imgContent",
            value: JSON.stringify(list),
            needUpdateMainChild: true,
          })
        );
      });
      Bus.$off(`chooseBottomMenuIconLinkAfter${this.controlData.id}`);
      Bus.$on(`chooseBottomMenuIconLinkAfter${this.controlData.id}`, (params) => { 

        this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "iconContent") {
                  row.list[this.currentChooseIndex].linkUrl = params.url;
                  row.list[this.currentChooseIndex].linkName = params.name;
                }
              })
            }
          })


          let list = [];
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "iconContent") {
                  list = JSON.parse(JSON.stringify(row.list))
                }
              })
            }
          })


        // this.control.right[2].catalog[0].list[this.currentChooseIndex].linkUrl = params.url;
        // this.control.right[2].catalog[0].list[this.currentChooseIndex].linkName = params.name;
        this.control.main.iconContent[this.currentChooseIndex].linkUrl = params.url;
        this.control.main.iconContent[this.currentChooseIndex].linkName = params.name;
        this.updateParent(
          JSON.stringify({
            rightIndex: 2,
            catalogIndex: 0,
            ename: "iconContent",
            value: JSON.stringify(list),
            needUpdateMainChild: true,
          })
        ); 
      });
      Bus.$off(`chooseBottomMenuImgLinkAfter${this.controlData.id}`);
      Bus.$on(`chooseBottomMenuImgLinkAfter${this.controlData.id}`, (params) => {

          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "imgContent") {
                  row.list[this.currentChooseIndex].linkUrl = params.url;
                  row.list[this.currentChooseIndex].linkName = params.name;
                }
              })
            }
          })


          let list = [];
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "imgContent") {
                  list = JSON.parse(JSON.stringify(row.list))
                }
              })
            }
          })


        // this.control.right[2].catalog[1].list[this.currentChooseIndex].linkUrl = params.url;
        // this.control.right[2].catalog[1].list[this.currentChooseIndex].linkName = params.name;
        this.control.main.iconContent[this.currentChooseIndex].linkUrl = params.url;
        this.control.main.iconContent[this.currentChooseIndex].linkName = params.name;
        this.updateParent(
          JSON.stringify({
            rightIndex: 2,
            catalogIndex: 1,
            ename: "imgContent",
            value: JSON.stringify(list),
            needUpdateMainChild: true,
          })
        );
      });
    });
    setTimeout(() => {
      this.needUpdate = true;
    }, 1000);
  },
  methods: {
    //初始化
    init() {
      if (this.controlData) {
        this.control = null;
        this.$nextTick(() => {
          this.control = JSON.parse(JSON.stringify(this.controlData));
        });
      }
    },
    //菜单按钮，是图标+文字时，选择图标
    openChooseIcon(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseImgGroup", {
        ename: "bottomMenuIcon",
        controlid: this.control.id,
      });
    },
    //菜单按钮，是图标+文字时，修改图标
    updateChooseIcon(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseImgGroup", {
        ename: "bottomMenuIcon",
        controlid: this.control.id,
      });
    },
    //菜单按钮，是图标+文字时，删除图标
    delIcon(index) {
      this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "iconContent") {
                  row.list[this.currentChooseIndex].icon = "";
                }
              })
            }
          })


          let list = [];
          this.control.right.forEach(item => {
            if(item.catalog && item.catalog.length>0) {
              item.catalog.forEach(row => {
                if(row.ename == "iconContent") {
                  list = JSON.parse(JSON.stringify(row.list))
                }
              })
            }
          })



      // this.control.right[2].catalog[0].list[index].icon = "";
      this.control.main.iconContent[index].icon = "";
      this.updateParent(
        JSON.stringify({
          rightIndex: 2,
          catalogIndex: 0,
          ename: "iconContent",
          value: JSON.stringify(list),
          needUpdateMainChild: true,
        })
      );
    },

    //菜单按钮，是图标+文字时，修改链接
    rightUpdateLinkForIcon(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "bottomMenuIconLink",
        controlid: this.control.id,
      });
    },
    //菜单按钮，是图标+文字时，选择链接
    rightChooseLinkForIcon(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "bottomMenuIconLink",
        controlid: this.control.id,
      });
    },

    //菜单按钮，是图片，选择默认图片
    openChooseImgForMenuImg(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseImgGroup", {
        ename: "bottomMenuImage",
        controlid: this.control.id,
      });
    },
    //菜单按钮，是图片，修改默认图片
    updateChooseImgForMenuImg(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseImgGroup", {
        ename: "bottomMenuImage",
        controlid: this.control.id,
      });
    },
    //菜单按钮，是图片，删除默认图片
    delImgForMenuImg(index) {
      this.control.right[2].catalog[1].list[index].img = "";
      this.control.main.imgContent[index].img = "";
      this.updateParent(
        JSON.stringify({
          rightIndex: 2,
          catalogIndex: 1,
          ename: "imgContent",
          value: JSON.stringify(this.control.right[2].catalog[1].list),
          needUpdateMainChild: true,
        })
      );
    },

    //菜单按钮，是图片，选择选中时图片
    openChooseImgForMenuActive(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseImgGroup", {
        ename: "bottomMenuImageActive",
        controlid: this.control.id,
      });
    },
    //菜单按钮，是图片，修改选中时图片
    updateChooseImgForMenuActive(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseImgGroup", {
        ename: "bottomMenuImageActive",
        controlid: this.control.id,
      });
    },
    //菜单按钮，是图片，删除选中时图片
    delImgForMenuActive(index) {
      this.control.right[2].catalog[1].list[index].activeImg = "";
      this.control.main.imgContent[index].activeImg = "";
      this.updateParent(
        JSON.stringify({
          rightIndex: 2,
          catalogIndex: 1,
          ename: "imgContent",
          value: JSON.stringify(this.control.right[2].catalog[1].list),
          needUpdateMainChild: true,
        })
      );
    },

    //菜单按钮，是图片，修改链接
    rightUpdateLinkForImg(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "bottomMenuImgLink",
        controlid: this.control.id,
      });
    },
    //菜单按钮，是图片，选择链接
    rightChooseLinkForImg(index) {
      this.currentChooseIndex = index;
      Bus.$emit("openChooseLinkGroup", {
        name: "bottomMenuImgLink",
        controlid: this.control.id,
      });
    },

    //添加是文字+图标的菜单
    addIconMenuItem() {
      let item = new Object();
      item.id = "id" + new Date().getTime();
      item.icon = "iconfont icon-31dianpu";
      item.name = "按钮文字";
      item.linkUrl = "";
      item.linkName = "";
      // item.badge = false; //暂时不需要
      item.active = false;
      this.control.right[2].catalog[0].list.push(item);
      this.updateParent(
        JSON.stringify({
          rightIndex: 2,
          catalogIndex: 0,
          ename: "iconContent",
          value: JSON.stringify(this.control.right[2].catalog[0].list),
          needUpdateMainChild: true,
        })
      );
    },

    //添加是图片的菜单
    addImgMenuItem() {
      let item = new Object();
      item.id = "id" + new Date().getTime();
      item.img = "";
      item.activeImg = "";
      item.linkUrl = "";
      item.linkName = "";
      // item.badge = false; //暂时不需要
      item.active = false;
      this.control.right[2].catalog[1].list.push(item);
      this.updateParent(
        JSON.stringify({
          rightIndex: 2,
          catalogIndex: 0,
          ename: "imgContent",
          value: JSON.stringify(this.control.right[2].catalog[1].list),
          needUpdateMainChild: true,
        })
      );
    },

    //删除某个是文字+图标的菜单按钮
    delIconWrapperItem(itemId) {
      let list = JSON.parse(
        JSON.stringify(this.control.right[2].catalog[0].list)
      );
      list = list.filter((row) => row.id != itemId);
      this.control.right[2].catalog[0].list = JSON.parse(JSON.stringify(list));
      this.updateParent(
        JSON.stringify({
          rightIndex: 2,
          catalogIndex: 0,
          ename: "iconContent",
          value: JSON.stringify(this.control.right[2].catalog[0].list),
          needUpdateMainChild: true,
        })
      );
    },

    //删除某个是图片的菜单按钮
    delImgWrapperItem(itemId) {
      let list = JSON.parse(
        JSON.stringify(this.control.right[2].catalog[1].list)
      );
      list = list.filter((row) => row.id != itemId);
      this.control.right[2].catalog[1].list = JSON.parse(JSON.stringify(list));
      this.updateParent(
        JSON.stringify({
          rightIndex: 2,
          catalogIndex: 1,
          ename: "imgContent",
          value: JSON.stringify(this.control.right[2].catalog[1].list),
          needUpdateMainChild: true,
        })
      );
    },

    //设置，打标记
    setBadge(rightIndex, catalogIndex, cIndex) {
      let list = this.control.right[rightIndex].catalog[catalogIndex].list;
      let ename = catalogIndex === 0 ? "iconContent" : "imgContent";
      this.control.main[ename] = list;
      this.updateParent(
        JSON.stringify({
          rightIndex: rightIndex,
          catalogIndex: catalogIndex,
          ename: ename,
          value: JSON.stringify(list),
          needUpdateMainChild: true,
        })
      );
    },

    //设置选中状态
    setSelected(rightIndex, catalogIndex, cIndex) {
      let list = this.control.right[rightIndex].catalog[catalogIndex].list;
      list.forEach((a, b) => {
        if (b !== cIndex) {
          a.active = false;
        }
      });
      let ename = catalogIndex === 0 ? "iconContent" : "imgContent";
      this.control.main[ename] = JSON.parse(JSON.stringify(list));
      this.updateParent(
        JSON.stringify({
          rightIndex: rightIndex,
          catalogIndex: catalogIndex,
          ename: ename,
          value: JSON.stringify(list),
          needUpdateMainChild: true,
        })
      );
      this.control.right[rightIndex].catalog[catalogIndex].list = JSON.parse(
        JSON.stringify(list)
      );
    },

    //菜单是图标+文字时，输入文字时触发的事件
    textInputChange(rightIndex, catalogIndex, cIndex) {
      const list = this.control.right[rightIndex].catalog[catalogIndex].list;
      let value = list[cIndex].value;
      this.control.main.iconContent[cIndex] = value;

      this.updateParent(
        JSON.stringify({
          rightIndex: rightIndex,
          catalogIndex: catalogIndex,
          ename: "iconContent",
          value: JSON.stringify(list),
          needUpdateMainChild: true,
        })
      );
    },

    //菜单按钮是图标+文字时，在右侧拖拽排序时，排序完成后触发的事件
    iconDraggableChanged() {
      const list = this.control.right[2].catalog[0].list;
      let newList = JSON.parse(JSON.stringify(list));
      this.updateParent(
        JSON.stringify({
          rightIndex: 2,
          catalogIndex: 0,
          ename: "iconContent",
          value: JSON.stringify(newList),
          needUpdateMainChild: true,
        })
      );
    },

    //菜单按钮是图片时，在右侧拖拽排序时，排序完成后触发的事件
    imgDraggableChanged() {
      const list = this.control.right[2].catalog[1].list;
      let newList = JSON.parse(JSON.stringify(list));
      this.updateParent(
        JSON.stringify({
          rightIndex: 2,
          catalogIndex: 1,
          ename: "imgContent",
          value: JSON.stringify(newList),
          needUpdateMainChild: true,
        })
      );
    },

    //从子组件更新过来的数据
    updateParent(params) {
      let p = JSON.parse(params),
        ri = p.rightIndex,
        ci = p.catalogIndex,
        pe = p.ename,
        pv = p.value;
      //图标样式
      if (pe === "iconStyle") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        p.needUpdateBgColor = true;
      }
      //图标位置
      if (pe === "iconPosition") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //菜单名称
      if (pe === "menuName") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //显示标记---暂时弃用
      // if (pe === "badgeDisplay") {
      //   this.control.right[ri].catalog[ci].value = pv;
      //   this.control.main[pe] = pv;
      // }
      //标记背景颜色---暂时弃用
      // if (pe === "badgeBgColor") {
      //   this.control.right[ri].catalog[ci].value = pv;
      //   this.control.main[pe] = pv;
      // }
      //菜单内容列表 图标+文字
      if (pe === "iconContent") {
        this.control.right[ri].catalog[ci].list = JSON.parse(pv);
        this.control.main[pe] = JSON.parse(pv);
      }
      //菜单内容列表 图片
      if (pe === "imgContent") {
        this.control.right[ri].catalog[ci].list = JSON.parse(pv);
        this.control.main[pe] = JSON.parse(pv);
      }
      //分割线颜色
      if (pe === "splitLineColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //文字默认颜色
      if (pe === "titleColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //文字选中颜色
      if (pe === "activeTitleColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //图标默认颜色
      if (pe === "iconColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //图标选中颜色
      if (pe === "activeIconColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //菜单默认颜色
      if (pe === "menuBgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //菜单选中颜色
      if (pe === "activeMenuBgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }
      //背景颜色
      if (pe === "bgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //更新到main中的子组件
      if (p.needUpdateMainChild) {
        //更新到main中具体组件中的数据
        if (this.needUpdate) {
          Bus.$emit("updateBottomMenuMainComponentData", {
            data: pv,
            ename: pe,
          });
          if (p.needUpdateBgColor) {
            this.$nextTick(() => {
              if (this.$refs.bgColor) {
                this.$refs.bgColor.init();
              }
            });
          }
        }
      }
    },
    //拉抽屉
    switchCollapse(params) {
      this.control.right[params.rightIndex].open = params.open;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.bottomMenuRightComponent {
  .iconWrapper {
    .item {
      height: 180px;
    }
  }
  .imgWrapper {
    .item {
      height: 150px;
    }
  }
  .iconWrapper,
  .imgWrapper {
    .item {
      background-color: #f4f6f8;
      margin-bottom: 20px;
      padding: 15px 15px 1px 0;
      position: relative;
      border-radius: 4px;
      display: flex;
      .itemL {
        width: 30px;
        height: 100%;
        align-items: center;
        display: flex;
        justify-content: flex-end;
        i {
          cursor: move;
        }
      }
      .itemR {
        width: calc(100% - 30px);
        height: 100%;
      }
      .delImageSwiperItem {
        position: absolute;
        top: -4px;
        right: -4px;
        z-index: 2;
        display: none;
        opacity: 0.5;
        cursor: pointer;
        &:hover {
          cursor: pointer;
        }
      }
      &:hover {
        .delImageSwiperItem {
          display: block;
        }
      }
      .row {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
        &:last-child {
          margin-bottom: 0px;
        }
        .left {
          width: 100px;
          padding-right: 10px;
          box-sizing: border-box;
          font-size: 12px;
          display: flex;
          justify-content: flex-end;
        }
        .right {
          display: flex;
          width: calc(100% - 100px);
          .normal,
          .active {
            & > span {
              font-size: 12px;
              width: 40px;
              padding: 5px 0;
              color: #666;
              display: flex;
              justify-content: center;
            }
          }
          .normal {
            margin-right: 30px;
          }
        }
      }
    }
  }
  .imgWrapper {
    .item {
      .row {
        align-items: flex-start;
        .left {
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .buttonWrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background-color: #fff;
    width: 40px;
    .uploadBtn {
      width: 100%;
      height: 100%;
      display: flex;
      box-sizing: border-box;
      border-radius: 2px;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      flex-direction: column;
      position: relative;
      cursor: pointer;
      border: 1px solid #e9edef;
      i {
        color: #0079fe;
        font-weight: bold;
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 5px;
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: flex;
    }
    .repaceImg,
    .delImg {
      position: absolute;
      z-index: 3;
      opacity: 0.5;
      display: none;
      cursor: pointer;
      &:hover {
        cursor: pointer;
      }
    }
    .repaceImg {
      left: 0;
      bottom: 0px;
      width: 100%;
      height: 20px;
      font-size: 12px;
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      justify-content: center;
    }
    .delImg {
      right: -4px;
      top: -4px;
    }
    &:hover {
      .repaceImg,
      .delImg {
        display: flex;
      }
    }
  }
  .chooseUrl {
    display: flex;
    flex: 1;
    flex-direction: column;
    .urlBox {
      .haveUrl {
        position: relative;
        .haveUrlBtn {
          padding: 0;
          height: 32px;
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 30px;
          box-sizing: border-box;
          position: relative;
          i {
            border-right: 1px solid transparent;
            height: 32px;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            position: absolute;
            width: 30px;
            top: 0;
            left: 0;
            z-index: 2;
          }
          &:hover {
            i {
              border-color: #eee;
            }
          }
        }

        .updateHref {
          padding: 0;
          position: absolute;
          top: 0;
          right: 0;
          z-index: 2;
          height: 32px;
          display: flex;
          align-items: center;
          width: 60px;
          justify-content: center;
          border-radius: 0;
          border-left: 1px solid #eee;
        }
      }
      .noUrl {
        .noUrlBtn {
          padding: 0;
          height: 32px;
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 30px;
          box-sizing: border-box;
          position: relative;
          i {
            height: 32px;
            display: flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;
            position: absolute;
            width: 30px;
            top: 0;
            left: 0;
            z-index: 2;
          }
        }
      }
    }
  }
}
</style>